import "./header.js";
import { querystring,url } from "./tools.js";

let {filmId,cinemaId} = querystring.parse(location.search);
$.ajax({
    type: "get",
    url: "/api/films/all",
    success: function(data) {
        
        let str = data
            .map((item, i) => {
                if ((!filmId && i == 0) || filmId == item._id) {
                    filmId = item._id;
                    $(".movie-list span.pointer").css("left",i * 170 + 71);
                    return `
                        <div class="movie active" data-filmId="${item._id}" data-index="${i}">
                            <img src="${url}/images/${item.images[0]}" alt="">
                        </div>
                    `;
                }else{
                    return `
                        <div class="movie" data-filmId="${item._id}" data-index="${i}">
                            <img src="${url}/images/${item.images[0]}"  alt="">
                        </div>
                    `;
                }
            })
            .join("");
        $(".movie-list").prepend(str);
        $(".movie").click(function(){
            filmId = $(this).attr("data-filmId");
            let i = $(this).attr("data-index");
            $(".movie").removeClass("active");
            $(this).addClass("active");
            $(".movie-list span.pointer").css("left",i * 170 + 71);
            
            getScreens();

        });
        getScreens();
    }
});

const getScreens = function(){
    $(".date-item").remove();
    $.ajax({
        type:"get",
        url:`/api/filmAndCinemas/films/${filmId}/cinemas/${cinemaId}`,
        success:function(data){
            let scheduleIndex = -1;
            if(data.length == 0 || !data[0].schedule){             
                $("table.plist tbody").html("");   
                return;
            }
            let dateStr = data[0].schedule.map((item,i) => {
                let date = new Date(item.date);
                let today = new Date();
                // 如果日期和今天的日期相等，则在网页上显示今天
                if(today.format("yyyy/MM/dd") == item.date){
                    scheduleIndex = i;
                    return `
                        <span class="date-item active" data-index="${i}">今天 ${date.format("M月d")}</span>        
                    `;
                }else if(date >= today){
                    
                    return `
                        <span class="date-item" data-index="${i}">${date.format("EEE M月d")}</span>        
                    `;
                }else{
                    return "";
                }
               
            }).join("");
            $(".show-date").append(dateStr);
            

            // 给选择日期的标签添加事件
            $(".date-item").click(function(){
                $(".date-item").removeClass("active");
                $(this).addClass("active");
                changeScreen(data[0],$(this).attr("data-index"));
            });
            changeScreen(data[0],scheduleIndex);
        }
    }); 
}
// 通过点击不同的日期切换放映厅
const changeScreen = function(data,scheduleIndex){
    if(scheduleIndex < 0){
        return;
    }
    let str = data.schedule[scheduleIndex].screens.map((item,i) => {
        return `
        <tr class="${i % 2 == 0 ? 'even' : ''}">
            <td>
                <span class="begin-time">${item.beginTime}</span> <br />
                <span class="end-time">${item.endTime}散场</span>
            </td>
            <td><span class="lang">${item.language}</span></td>
            <td><span class="hall">${item.name}</span></td>
            <td>
                <span class="sell-price"><span class="stonefont">${item.price}</span></span
                >
            </td>
            <td>
                <a
                    href="/buy.html?filmId=${filmId}&cinemaId=${cinemaId}&scheduleIndex=${scheduleIndex}&screenIndex=${i}"
                    class="buy-btn normal"
                    >选座购票</a
                >
            </td>
        </tr>
        `
    }).join("");
    $("table.plist tbody").html(str);
}
